<template>
    <div style="margin:0;padding:0;font-family: Microsoft YaHei;" class v-if="!progress.show">
      
        <div class='hvImg' style="height: 30vh;width: 100%;" >
            <!-- 博客头开始 -->
            <div class="blog_head"
                style="position: absolute;top: 0px;z-index: 1;width: 100%;margin:7rem auto;line-height: 69px;">
                <div class="title" v-if="title"
                    style="letter-spacing: .01em;font-size: 1.5em;font-style: normal;font-weight: 700;color: #2bbc8a!important;margin-top: 3rem;margin-bottom: 1rem;display: block;">
                    {{title}}
                    <div style="font-size: 13px;color: #7cab84;margin-top: -2rem;">{{blogDetail.userName}}</div>
                    <span v-if='isLogin'>
                        <span class="title_class" style="border: 1px dashed #b5b5b5;" @click="fnGoedit()"
                            v-if="user.name==blogDetail.userName"> 编辑
                        </span>
                    </span>
                </div>

                <!-- <hr style="width: 100%;height: 1px;border: 0;background: #EFEFEF;margin: 15px 0;"> -->
            </div>
            <!-- 博客头结束-->

            <img :src="blogDetail.bgImg?blogDetail.bgImg:$config.url.randomImgUrl" alt="" :style='`top:${scrollpx}px`'
                style="transition: unset;width: 100%;position: fixed;left: 0;height: 50vh;margin-top: -6vh;filter: grayscale(1) blur(4px) brightness(0.5);object-fit: cover;">
        </div>

        <div style='background: #0c0c0b;position: relative;width: 100%;'  :style="$pcShow?'':'width: 86%;padding: 0 26px;'">
            <!-- <el-dialog width="70%" title="查看图片" :visible.sync="dialogVisible" append-to-body
                style="text-align: center;">
                <img :src="downloadSrc" alt v-if="downloadSrc" style="width:80%;">
            </el-dialog> -->

            <img :src='downloadSrc?downloadSrc:"http://www.dlhtx.top:3000/img/logo2.png"' preview='1' ref='image' id='image' style='display:none;' >
            <!-- -->
            <commitBtn></commitBtn>

            <!-- 博客内容页区域 -->

            <div class="blog_content" :class="animate">
                <div class="title_detail">

                    <span>
                        <i class="iconfont icon-chakan" style="font-size: 14px;color: #4CAF50;"></i>
                        {{blogDetail.readcount}}
                        &nbsp&nbsp
                    </span>
                    <span>
                        <i class="iconfont icon-pinglun2" style="font-size: 14px;color:#fe7bff;"></i>
                        {{blogDetail.reviewsCount}}
                        &nbsp&nbsp
                    </span>
                    <span>
                        <i class="iconfont icon-icon-test" style="font-size: 15px;color:#65a2ff;"></i>
                        {{blogDetail.fabulousCount}}
                        &nbsp&nbsp
                    </span>

                    <span>
                        {{friendlyDate(blogDetail.creat_time )}}&nbsp&nbsp
                    </span>

                    <span>
                        <router-link :to="{name:'blogCard',query:{className:titleClass}}">
                            <span class="title_class">{{titleClass}}</span>
                        </router-link>
                    </span>
                    <!-- 作者:{{blogDetail.userName}}　最后编辑于: -->
                </div>
                <!-- 博客体开始 -->
                <div class="blog_body animated fadeInUp">
                    <vue-markdown :source="content" class ref="md" v-highlight id="vueMarkdown"
                        style="font-family: Microsoft YaHei;"></vue-markdown>
                </div>
                <!-- 博客体结束 -->

                <!-- 侧边目录区域 含有重大bug-->
                <!-- <outline-tree :treeData="navTree" class="tree" ref="tree" v-if='$pcShow&&$config.common.dirShow'> 
                <div slot-scope="{ data, parentData, level }">
                    <div class="node-render-content" @click.stop="jumpToAnchor(data.id)">
                        {{ data.title }}
                    </div>
                </div>
            </outline-tree> -->
                <!-- 侧边目录区域 -->
            </div>

            <!-- 附件区域 -->
            <div style="cursor:pointer;height:40px;line-height: 40px;display: flex;justify-content: center;align-items: center;border: 1px dashed #545454;color: black;width: 17%;margin: 6rem auto;"
                :style="$pcShow?'':'width:100%;'" class="attach" v-if="blogDetail.upFileUrl&&isLogin"
                @click="downLoad(blogDetail.upFileUrl)">
                <img src="../../assets/img/zip.png" alt style="height: 25px;" v-if='isLogin'>
                <a style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{blogDetail.upFileUrl.split('-')[1]}}</a>
            </div>
            <div v-if='!isLogin&&blogDetail.upFileUrl'
                style="cursor:pointer;height:40px;line-height: 40px;display: flex;justify-content: center;align-items: center;border: 1px dashed #545454;color: white;width: 17%;margin: 6rem auto;"
                :style="$pcShow?'':'width:100%;'" class="attach" @click='goLogin()'>
                登录/注册后下载附件</div>
            <!-- 附件区域 -->

            <!-- 上下页区域 -->
            <div style="margin: 6rem auto 0px;text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                <div v-if='preBlog'
                    style="height: 30px;line-height: 30px;width: 50%;margin: 0px auto;text-align: left;;"
                    :style="$pcShow?'':'width:100%;'">
                    <span style="background: #343534;padding: 2px 10px;border-radius: 2px">上一篇</span>
                    <span>
                        <router-link class='nextBlog' :to="{name:'blogDetail',query:{blogId:preBlog.blogId}}">
                            {{preBlog.title}}
                            来自 {{preBlog.userName}}</router-link>
                    </span>
                </div>
                <div v-if='nextBlog' style="height: 30px;line-height: 30px;width: 50%;margin: 0 auto;text-align: left;"
                    :style="$pcShow?'':'width:100%;'">
                    <span style="background: #343534;padding: 2px 10px;border-radius: 2px">下一篇</span>
                    <span>
                        <router-link class='nextBlog' :to="{name:'blogDetail',query:{blogId:nextBlog.blogId}}">
                            {{nextBlog.title}} 来自 {{nextBlog.userName}}</router-link>
                    </span>
                </div>
            </div>
            <!-- 上下页区域 -->

            <!-- 特殊说明区域 -->
            <div class="info" :style="$pcShow?'':'width:100%;'"
                style="width: 50%;line-height: 30px;rgba(56, 56, 56, 0.31);margin: 0 auto;text-align: left;padding: 10px 25px;margin-top:3rem;">
                <div>
                    <span style="">
                        <a href style='color: #929292;font-size: 14px;'>非特殊说明，本博所有文章均为博主原创。</a>
                    </span>
                </div>
                <div>
                    <span style="color: #929292;font-size: 14px;">
                        本文为DLHTX博主「{{blogDetail.userName}}」的原创文章，转载请附上原文出处链接：<a :href='currentHref'
                            style='color: rgb(130, 84, 84);'> {{currentHref}}</a>。
                    </span>
                </div>
            </div>
            <!-- 特殊说明区域 -->

            <!-- 分享区域 -->
            <share :config="config"></share>
            <!-- 分享区域 -->

            <!-- 个人信息区域 -->
            <div style="display: flex;justify-content: center;align-items: center;">
                <div class="fave_box" @click="toggleClass()" :class="fave_active" style="position:relative">
                    <lottieLike
                        style="width: 70px;height: 89px;overflow: hidden;margin: 0px auto;z-index: 100000;top: 9%;left: 20%;transform: translate(-30px, -30px);position: absolute;"
                        ref='like'>
                    </lottieLike>
                    <span style="padding-left: 41px;" :style="fave_active?'color:black;':''"
                        v-if='fave_active'>已点赞</span>
                    <span style="padding-left: 47px;" :style="fave_active?'color:black;':''" v-else>点赞</span>
                </div>
                <div class="fave_box" @click='toggleCollect()' :class="collect_active" style="position:relative">
                    <lottieStart
                        style="width: 51px;height: 90px;overflow: hidden;margin: 0px auto;z-index: 100000;top: 8%;left: 29%;transform: translate(-30px, -30px);position: absolute;"
                        ref='start'>
                    </lottieStart>
                    <span style="padding-left: 41px;" :style="collect_active?'color:black;':''"
                        v-if='collect_active'>已收藏</span>
                    <span style="padding-left: 47px;" :style="collect_active?'color:black;':''" v-else>收藏</span>

                </div>
            </div>
            <!-- 个人信息区域 -->

            <!-- 评论区域 -->
            <div class="blog_commit" id='blog_commit'>
                <div style="padding: 1rem;">
                    评论
                    <span v-if="blogCommitList">({{blogCommitList.length}}条)</span>
                </div>
                <div class="comment-view" v-if='isLogin' :style="$pcShow?'':'width:85%;'">
                    <div class="comment-header">
                        <img class="avatar" :src="user.headImg" width="80" height="80" style='object-fit: cover;'>
                        <span class="comment-author" v-if="!user.nickName">{{user.name}}</span>
                        <span class="comment-author" v-if="user.nickName">{{user.nickName}}</span>
                    </div>
                    <div class="comment-content">
                        <span class="comment-author-at"></span>
                        <textarea name="text" v-model="commitBody" placeholder="留下你的踪迹~~" ref='textarea' id='textarea'
                            @input='listenText'></textarea>
                    </div>
                    <div class="comment-meta" style="font-size: 12px;text-align: left;line-height: 40px;height: 40px;">
                        <i class="iconfont icon-biaoqing-xue" @click='fnShowPicker()'></i>
                        <div class="commit_btn" @click="fnaddCommit()" style="float: right;position: inherit;">评论</div>
                    </div>
                </div>
                <!-- 表情选择器 -->
                <picker :style='$pcShow?"":"width: 96%;"' v-if='showPicker' @select="addEmoji"
                    style="width: 56%;background: rgb(30, 32, 32);border:1px solid rgb(30, 32, 32);margin: -2rem auto;" />
                <!-- 表情选择器 -->
                <div class="comment-view" v-if='!isLogin' @click='goLogin()' :style="$pcShow?'':'width:85%;'">
                    登录/注册 发表评论
                </div>
                <div v-if="blogCommitList">
                    <div class="comment-view" v-for="(commit,index) in blogCommitList" :key="commit.id"
                        :style="$pcShow?'':'width:85%;'" :id='"commit" + index'>

                        <div class="comment-header">
                            <img class="avatar" :src="commit.avatar" width="80" height="80" style='object-fit: cover;'>
                            <span class="comment-author">
                                <span v-if='commit.nickName'>{{commit.nickName}}</span>
                                <span v-else>{{commit.commitName}}</span>
                                <span
                                    style="background: rgb(33, 33, 33);width: 51PX;height: 24px;color: white;border-radius: 3px;"
                                    v-if="commit.commitName==blogDetail.userName">楼主</span>
                                <span v-if='isLogin'>
                                    <span
                                        style="background: rgb(68, 68, 68);width: 51PX;height: 24px;color: white;border-radius: 3px;"
                                        v-if="commit.commitName==user.name">自己</span>
                                </span>
                                <span v-if='commit.sex=="男"' style="float: right;">
                                    <i class="iconfont icon-nan" style="font-size: 17px;color: #73b5fb;"></i>
                                </span>
                                <span v-if='commit.sex=="女"' style="float: right;">
                                    <i class="iconfont icon-nv" style="font-size: 17px;color: #fb7377;"></i>
                                </span>
                                <span v-if='commit.sex=="外星人"' style="float: right;">
                                    <i class="iconfont icon-waixingren" style="font-size: 17px;color: #c76aff;"></i>
                                </span>
                            </span>
                            <span style="float: right;">#{{index+1}}</span>
                            <span class="review" style="float: right;" @click="showRe(index)" v-if='isLogin'>回复</span>
                        </div>
                        <div class="comment-content">
                            <span class="comment-author-at"></span>
                            <vue-markdown :source="commit.commitBody" ref v-highlight id="markdown_review"
                                style="color: #e0e0e0;"></vue-markdown>
                            <p></p>
                        </div>
                        <div class="comment-meta">
                            <time class="comment-time" style="color: #ababab;">{{friendlyDate(commit.update_time)}}
                                <span v-if='commit.children.length != 0'
                                    style="color: rgb(186, 176, 255);">({{commit.children.length}}条回复 默认显示第一条)</span>
                            </time>
                            <span v-if='isLogin'>
                                <span v-if='user.name==commit.commitName' class="review"
                                    style="float: right;background: #4a4a4a;padding: 2px 9px;border-radius: 2px;"
                                    @click="deleteCommit(commit.id)">删除</span>
                            </span>

                            <span class="review"
                                style="float: right;background: #4a4a4a;padding: 2px 9px;margin:0 2px;border-radius: 2px;"
                                @click="fnhiddenCommit(index)" v-if="commit.children.length != 0&&commit.show">收起</span>
                            <span class="review"
                                style="float: right;background: #4a4a4a;padding: 2px 9px;border-radius: 2px;margin:0 2px;"
                                @click="fnshowCommit(index)"
                                v-if="commit.children.length != 0&&!commit.show">展开全部</span>

                        </div>
                        <!-- 评论回复书写 -->
                        <div class="commit-review animated fadeIn" v-show="showCommitReviewIndex==index"
                            style="position: relative;margin-top: 12px;">
                            <div class="comment-content">
                                <span class="comment-author-at"></span>
                                <textarea name="text" v-model="commitReview" placeholder="请输入您的回复内容~~"
                                    @input='listenText'
                                    style="background: rgb(82, 82, 82);height: 109px;border-radius: 5px;padding-left: 20px;width: calc(100% - 20px);"></textarea>
                            </div>
                            <div class="comment-meta">
                                <div class="commit_btn" @click="closeRe()"
                                    style="right: 20%;background: none;border:none;" :style='$pcShow?"":"right: 40%;"'>
                                    取消回复</div>
                                <div class="commit_btn" @click="fnreviewCommit(commit.id,commit.commitName,index)">提交回复
                                </div>
                            </div>
                        </div>
                        <!-- 评论回复书写 -->
                        <!-- 评论回复查看 -->
                        <div class="commitReview" :style="$pcShow?'':'width:100%;'">
                            <div v-for="(review, index2) in commit.children" :key="index2" class="reviewBox"
                                style="text-align: left;padding: 10px 15px;border-bottom: 1px dashed #585858;"
                                v-if='review.show'>
                                <div style="height: 35px;line-height: 35px;">
                                    <img class="avatar" :src="review.fromUserImg" alt
                                        style="display: inline-block;float: left;width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;object-fit: cover;">
                                    {{review.fromUser}}
                                    <span style="color: #9e9e9e;">回复</span>
                                    {{review.toUser}}
                                    <span class="review"
                                        style="    color: rgb(183, 183, 183);float: right;font-size: 10px;"
                                        @click="showRe2(commit.id,review.fromUser,index)" v-if='isLogin'>回复</span>
                                </div>
                                <div style="padding: 10px 0;color: white;word-wrap:break-word">
                                    <vue-markdown :source="review.reviewBody" ref v-highlight id="markdown_review2"
                                        style="color: #e0e0e0;">
                                    </vue-markdown>
                                </div>
                                <div class="comment-meta">
                                    <time class="comment-time"
                                        style="color: #ababab;">{{friendlyDate(review.review_time) }}</time>
                                    <span v-if='isLogin'>
                                        <span v-if='review.fromUser==user.name' class="review"
                                            style="float: right;background: #4a4a4a;padding: 2px 9px;border-radius: 2px;"
                                            @click="deleteCommitReview(review.review_id)">删除</span>
                                    </span>

                                </div>
                            </div>
                        </div>
                        <!-- 评论回复查看 -->

                    </div>
                </div>

                <div v-if="!blogCommitList" class="comment-view">还没有评论哦~</div>
            </div>
            <!-- 评论区域 -->
        </div>

    </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import auth from "../../api/auth";
import blog from "../../api/blog";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import VueMarkdown from "vue-markdown";
import upBtn from "../../components/upBtn/upBtn";
import commitBtn from "../../components/upBtn/commitBtn";
import "highlight.js/styles/tomorrow-night.css";
import { Picker } from 'emoji-mart-vue'
import lottieStart from '../../components/lottie/lottile-star'
import lottieLike from '../../components/lottie/lottie-like'

export default {
    name: "index",
    components: {
        Header,
        Footer,
        VueMarkdown,
        upBtn,
        Picker,
        commitBtn,
        lottieStart,
        lottieLike
    },
    data() {
        return {
            scrollpx: 0,
            showPicker: false,
            currentHref: window.location.href,
            blogDetail: {},
            value: "",
            content: "",
            title: "",
            titleClass: "",
            loading: false,
            blogCommitList: [],
            commitBody: "",
            active: "",
            fave_active: "",
            collect_active: "",
            showCommitReview: true,
            showCommitReviewIndex: -1,
            showCommitReviewIndex2: -1,
            commitReview: "",
            animate: "animated fadeInUp",
            dialogVisible: false,
            downloadSrc: "",
            nextBlog: {},
            preBlog: {},
            // vue-share
            config: {
                url: '', // 网址，默认使用 window.location.href
                source: 'qzone', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
                title: ' ', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
                description: '跟你分享一篇很好的文章', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
                image: 'http://www.dlhtx.top:3000/img/logo.png', // 图片, 默认取网页中第一个img标签
                sites: ['qzone', 'qq', 'weibo', 'wechat', 'douban'], // 启用的站点
                // disabled: ['google', 'facebook', 'twitter'], // 禁用的站点
                wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
                wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
            },
            sending: false,
            navTree: ''
        };
    },
    mounted() {
        // console.log(this.config)
        this.getBlog();
        this.addReadCount(); //阅读数量 
        this.findPre();
        this.findNext();
        this.findCollectAndFabs()
      
        // window.addEventListener('scroll', this.handleScroll, true);
    },
    methods: {
        ...mapActions(["getGrxx", "checkLogin", "logout", "getPermissions"]),
        handleScroll() {
            // 页面滚动距顶部距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop
            var scroll = scrollTop - this.i;
            this.i = scrollTop;
            if (scroll < 0) {
                this.scrollpx -= 1
            } else {
                //向下滚动
                this.scrollpx += 1
            }
        },
        jumpToAnchor(id) {//目录跳转方法
            let element = document.getElementById(id)
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
            }
        },
        listenText() {//评论高度自适应
            var text = document.getElementById("textarea");
            this.autoTextarea(text);
        },

        autoTextarea(elem, extra, maxHeight) {//评论高度自适应执行函数
            extra = extra || 0;
            var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                    elem.addEventListener ?
                        elem.addEventListener(type, callback, false) :
                        elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                    var val = elem.currentStyle[name];
                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                            parseFloat(getStyle('paddingTop')) -
                            parseFloat(getStyle('paddingBottom')) + 'px';
                    };
                    return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
            elem.style.resize = 'none';
            var change = function () {
                var scrollTop, height,
                    padding = 0,
                    style = elem.style;
                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;
                if (!isFirefox && !isOpera) {
                    padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                    if (maxHeight && elem.scrollHeight > maxHeight) {
                        height = maxHeight - padding;
                        style.overflowY = 'auto';
                    } else {
                        height = elem.scrollHeight - padding;
                        style.overflowY = 'hidden';
                    };
                    style.height = height + extra + 'px';
                    scrollTop += parseInt(style.height) - elem.currHeight;
                    document.body.scrollTop = scrollTop;
                    document.documentElement.scrollTop = scrollTop;
                    elem.currHeight = parseInt(style.height);
                };
            };
            addEvent('propertychange', change);
            addEvent('input', change);
            addEvent('focus', change);
            change();
        },

        fnshowCommit(index) {//显示评论
            this.blogCommitList[index].show = true
            this.blogCommitList[index].children.forEach(item => {
                item.show = true
            })
            // console.log(this.blogCommitList)
        },

        fnhiddenCommit(index) {//隐藏评论
            this.blogCommitList[index].show = false
            this.blogCommitList[index].children.forEach(item => {
                item.show = false
            })
            // console.log(this.blogCommitList)
        },

        deleteCommit(id) {//删除评论
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                blog.deleteCommit(id).then(res => {
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getBlogCommit();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        deleteCommitReview(id) {//删除评论的评论
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                blog.deleteCommitReview(id).then(res => {
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getBlogCommit();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        fnShowPicker() {//显示表情选择器
            if (this.showPicker) {
                this.showPicker = false
            } else {
                this.showPicker = true
            }
        },
        addEmoji(e) {//增加表情方法
            this.commitBody += e.colons
            this.showPicker = false
        },

        goLogin() {//去登陆方法
            this.$router.push({ path: '/login', query: { redirect: this.$route.path + '?blogId=' + this.$route.query.blogId } })
        },

        downLoad(url) {//下载方法
            window.open(url);
        },

        async findNext() {//下一页
            let res = await blog.findNext(this.$route.query.blogId);

            if (res.data) {
                this.nextBlog = res.data[0];

            }
        },

        async findPre() {//上一页
            let res = await blog.findPre(this.$route.query.blogId);
            if (res.data) {
                this.preBlog = res.data[0];
            }
        },
        setPreCode() {//增加行号
            var elems = document.getElementsByTagName("pre");
            for (let i = 0; i < elems.length; i++) {
                var elem = elems[i];
                var lines = elem.innerHTML.split(/\n/).slice(0, -1);
                var html = lines
                    .map(function (item, index) {
                        if (item == '') {
                            return (
                                '<li><span class="line-num" data-line="' +
                                (index + 1) +
                                '"> </span>' +
                                item +
                                "</li>"
                            );
                        } else {
                            return (
                                '<li><span class="line-num" data-line="' +
                                (index + 1) +
                                '"></span>' +
                                item +
                                "</li>"
                            );
                        }

                    })
                    .join("");
                html = "<ul>" + html + "</ul>";
                // 输出语言
                if (lines.length > 3 && elem.className.match(/lang-(\w+)/)) {
                    html += '<b class="name">' + RegExp.$1 + "</b>";
                }
                elem.innerHTML = html;
            }
        },

        closeRe() {//关闭评论输入框
            this.showCommitReviewIndex = -1;
            this.commitReview = "";
        },

        showRe(index) {//显示评论输入框
            this.showCommitReviewIndex = index;
        },

        showRe2(id, name, index) {//显示评论的评论
            this.$prompt(`你将要回复${name}`, "回复", {
                confirmButtonText: "确定",
                cancelButtonText: "取消"
            })
                .then(value => {
                    if (value.value) {
                        this.fnreviewCommit2(id, name, value.value, index);
                    } else {
                        this.$message({
                            type: "error",
                            message: "不可为空"
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消输入"
                    });
                });
        },


        async getBlog() {//获取博客
            this.loading = true;
            let res = await blog.findBlogByBlogId(this.$route.query.blogId);
            if (res.success) {
                setTimeout(() => {
                    let date = res.data[0];
                    this.blogDetail = date;
                    this.content = date.body;
                    this.title = date.title;
                    document.title = date.title
                    this.config.title = this.title
                    this.titleClass = date.className;
                    this.config.url = window.location.href
                    this.loading = false;
                    this.getBlogCommit();
                    setTimeout(() => {
                        this.setPreCode(); //设置行号
                        if(!this.$pcShow){
                            console.log(document.getElementsByTagName('video'))
                            let videoArr = document.getElementsByTagName('video')
                            for(var i=0;i<videoArr.length;i++){
                                videoArr[i].style.width = '90vw'//设置视频宽度
                            }                            
                        }else{
                            let videoArr = document.getElementsByTagName('video')
                            for(var i=0;i<videoArr.length;i++){
                                videoArr[i].style.maxHeight='500px'
                                videoArr[i].style.width = '100%'//设置视频宽度
                                videoArr[i].style.margin = '0 auto'
                            }
                        }
                       
                    }, 1000);
                }, 500);
            }
        },



        async getBlogCommit() {//获取博客下的评论
            let blogCommitList = await blog.findBlogCommitByBlogId(
                this.$route.query.blogId
            );
            if (blogCommitList.success) {
                var arr = this.formatData(blogCommitList.data);
                let times = 1
                arr.forEach((item, index) => {
                    // console.log(item)
                    times++
                    item.timestr = new Date(item.update_time).getTime()
                    item.avatar = item.avatar + `?time=${new Date().getTime() + times}`
                    var times2 = 1
                    item.children.forEach((item2, index2) => {
                        times2++
                        if (index2 == 0) {
                            item2.show = true
                        } else {
                            item2.show = false
                        }
                        item2.fromUserImg = item2.fromUserImg + `?time=${new Date().getTime() - times2}`
                        if (item2.toUser == null) {
                            arr[index].children.splice(index2, 1);
                        }
                    });
                });

                this.blogCommitList = arr //.reverse(this.compare("timestr"));;

                //判断跳转函数
                if (window.location.href.search('href') != -1) {
                    // console.log(`#${window.location.href.split('href=')[1]}`)
                    var ids = window.location.href.split('href=')[1]
                    var idsindex = ids.split('commit')[1]
                    // console.log(idsindex)
                    setTimeout(() => {
                        let ele = [document.getElementById(`${window.location.href.split('href=')[1]}`)][0]
                        // console.log(ele, ele.offsetTop)
                        window.scroll(0, ele.offsetTop)
                    }, 1000)
                    setTimeout(() => {//自动展开
                        this.fnshowCommit(idsindex)
                    }, 1700)
                }

                //图片监听事件
                setTimeout(() => {
                    this.$preview.on("close", res => { //关闭preview遮罩
                        setTimeout(()=>{
                          document.getElementsByClassName('pswp')[0].classList.remove('pswp--open')
                        },1000)
                    });
                    document.querySelectorAll('img').forEach(ele => {
                        if (ele.src.search('/static/img/logo.5ce3172.png') != -1) {
                            return
                        } else if (ele.src.search('/img/logo.png') != -1) {
                            return
                        } else if (ele.id=='image'){
                            console.log(ele)
                        }else {
                            ele.style.borderRadius = '8px'
                            ele.style.cursor = 'pointer'
                            ele.onclick = () => {
                                this.downloadSrc = ele.src;
                                setTimeout(()=>{
                                    this.downloadSrc = ele.src;
                                },100)
                                this.$previewRefresh();
                                this.$refs.image.click();
                                setTimeout(()=>{
                                    this.$refs.image.click();
                                },50)
                            }
                        }
                    })
                }, 2000)
            }
        },



        compare(propertyName) {//时间优化
            return function (object1, object2) {
                var value1 = object1[propertyName];
                var value2 = object2[propertyName];
                if (value2 < value1) {
                    return 1;
                } else if (value2 > value1) {
                    return -1;
                } else {
                    return 0;
                }
            }
        },

        async fnaddCommit() {//增加博客下的评论
            if (this.sending) return this.$message({ message: "正在发送数据", type: "warning" });
            var href = window.location.href
            if (this.commitBody == "")
                return this.$message({ message: "评论内容不可为空", type: "warning" });
            this.sending = true
            let res = await blog.addCommit(
                this.user.name,
                this.$route.query.blogId,
                this.commitBody,
                this.user.headImg,
                String(new Date()),
                this.blogDetail.mail,
                href
            );
            this.sending = false
            if (res.success) {
                this.$message({ message: "评论成功", type: "success" });
                this.commitBody = "";
                this.blogDetail.reviewsCount = this.blogDetail.reviewsCount + 1;
                this.getBlogCommit();
            }
        },

        async fnreviewCommit(id, name, index) {//增加评论的回复
            if (this.sending) return this.$message({ message: "正在发送数据", type: "warning" });
            this.sending = true
            var href = String(window.location.href) + `&href=commit${index}`
            // console.log(window.location.href)
            if (this.commitReview == "")
                return this.$message({ message: "评论内容不可为空", type: "warning" });
            if (this.user.name == name)
                return this.$message({
                    message: "你怎么能给自己回复呢~",
                    type: "warning"
                });
            let res = await blog.reviewCommit(
                id,
                this.commitReview,
                name,
                this.user.name,
                String(new Date()),
                href
            );
            this.sending = false
            if (res.success) {
                this.$message({ message: "回复成功", type: "success" });
                this.closeRe();
                this.getBlogCommit();
            }
        },

        async fnreviewCommit2(id, name, commitReview, index) {//增加回复的回复
            //回复回复的人
            if (this.user.name == name){
                return this.$message({
                    message: "你怎么能给自己回复呢~",
                    type: "warning"
                });
            }
            console.log(window.location.href)
            let res = await blog.reviewCommit(
                id,
                commitReview,
                name,
                this.user.name,
                String(new Date()),
                String(window.location.href) + `&href=commit${index}`
            );
            if (res.success) {
                this.$message({ message: "回复成功", type: "success" });
                this.closeRe();
                this.getBlogCommit();
            }
        },
        collect(type) {
            if (type == '取消') {
                this.cancelCollect()
            } else {
                this.addCollect()
            }

        },

        async findCollectAndFabs() {//查找这个人对于这篇博客的点赞收藏情况
            var user = !JSON.parse(localStorage.getItem('user')) ? undefined : JSON.parse(localStorage.getItem('user'))
            if (user == undefined) return
            let res = await blog.findCollectAndFab(user.name, this.$route.query.blogId)
            if (res.success) {
                if (res.data.collect) {
                    this.collect_active = "faveActive";
                    setTimeout(() => {
                        this.$refs.start.unsetDirection()//停留最后一帧
                    }, 1000)

                } else {
                    this.collect_active = "";
                }

                if (res.data.fab) {
                    this.fave_active = "faveActive";
                    setTimeout(() => {
                        this.$refs.like.unsetDirection()//停留最后一帧
                    }, 1000)

                } else {
                    this.fave_active = "";
                }
            }
        },

        async addCollect() {//收藏
            if (this.user == undefined) return window.location.href = `http://${window.location.host}/login`
            let res = await blog.addCollect(this.user.name, this.$route.query.blogId)
            if (res.success) {
                this.$message({ message: "收藏成功!", type: "success" });
                this.blogDetail.fabulousCount = this.blogDetail.fabulousCount + 1;
                this.findCollectAndFab()
            }
        },

        async cancelCollect() {//取消收藏
            let res = await blog.cancelCollect(this.user.name, this.$route.query.blogId)
            if (res.success) {
                this.$message({ message: "取消成功!", type: "success" });
                this.findCollectAndFab()
            }
        },

        async addFabulous() {//点赞
            if (this.user == undefined) return window.location.href = `http://${window.location.host}/login`
            try {
                let res = await blog.addFabulous(
                    this.user.name,
                    this.$route.query.blogId
                );
                if (res.success) {
                    this.$message({ message: "点赞成功!", type: "success" });
                    this.blogDetail.fabulousCount = this.blogDetail.fabulousCount + 1;
                }
            } catch (err) {
                if (err.msg == "已经点赞过了,不要重复点赞")
                    return this.$message({
                        message: "重复点赞伤身体哦~!",
                        type: "warning"
                    });
                this.$message.error({ message: "点赞失败!" });
            }
        },

        async cancelFabulous() {//取消点赞
            try {
                let res = await blog.cancelFabulous(
                    this.user.name,
                    this.$route.query.blogId
                );
                if (res.success) {
                    this.$message({ message: "取消成功!", type: "success" });
                }
            } catch (err) {
                this.$message.error({ message: "取消失败!" });
            }
        },

        async addReadCount() {//增加阅读
            try {
                let res = await blog.addReadCount(this.$route.query.blogId);
            } catch (err) {
            }
        },

        formatData(arr) {//格式化函数
            var map = {},
                dest = [];
            for (var i = 0; i < arr.length; i++) {
                var ai = arr[i];
                if (!map[ai.id]) {
                    dest.push({
                        id: ai.id,
                        show: false,
                        blogId: ai.blogId,
                        commitBody: ai.commitBody,
                        update_time: ai.update_time,
                        avatar: ai.headImg,
                        sex: ai.sex,
                        commitName: ai.name,
                        nickName: ai.nickName,
                        children: [ai]
                    });
                    map[ai.id] = ai;
                } else {
                    for (var j = 0; j < dest.length; j++) {
                        var dj = dest[j];
                        if (dj.id == ai.id) {
                            dj.children.push(ai);
                            break;
                        }
                    }
                }
            }
            return dest;
        },

        fnGoedit(blogId) {//去编辑
            event.stopPropagation();
            let routeData = this.$router.resolve({
                path: "/blogEdit",
                query: { id: this.$route.query.blogId }
            });
            window.open(routeData.href, "_blank");
        },

        toggleCollect() {
            if (this.collect_active == "") {//开始收藏
                this.$refs.start.unsetDirection()
                this.collect_active = "faveActive";
                this.collect('收藏')
            } else {//取消收藏
                this.collect_active = "";
                this.$refs.start.setDirection()
                this.collect('取消')
            }
        },

        toggleClass() {
            if (this.fave_active == "") {
                this.$refs.like.unsetDirection()
                this.fave_active = "faveActive";
                this.addFabulous();
            } else {
                this.$refs.like.setDirection()
                this.fave_active = "";
                this.cancelFabulous();
            }
        },
    },
    computed: {
        ...mapGetters(["isLogin", "user", "progress"])
    },
    filters: {
        formateDate: function (value) {
            //时间是没有问题的
            var data = new Date(value);
            return (
                data.getFullYear() +
                "-" +
                (data.getMonth() + 1 < 10
                    ? "0" + (data.getMonth() + 1)
                    : data.getMonth() + 1) +
                "-" +
                (data.getDate() < 10 ? "0" + data.getDate() : data.getDate()) +
                " " +
                (data.getHours() < 10 ? "0" + data.getHours() : data.getHours()) +
                ":" +
                (data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes()) +
                ":" +
                (data.getSeconds() < 10 ? "0" + data.getSeconds() : data.getSeconds())
            );
        }
    }
};
</script>
<style lang="less">
.tree {
    position: fixed;
    top: 9%;
    right: 20px;
    padding: 5px 10px;
    line-height: 30px;
    text-align: right;
    border-right: 2px dashed #61c7a0f0;
    .node-render-content {
        color: #38b786;
        cursor: pointer;
        font-size: 15px;
        &:hover {
            color: white;
        }
    }
}
.emoji-mart-bar {
    border: none !important;
}
.emoji-mart-anchor div {
    color: #d9d9d9;
    cursor: pointer;
    &:hover {
        color: white;
    }
}
.emoji-mart-search input {
    font-size: 16px;
    display: block;
    width: 100%;
    padding: 0.2em 0.6em;
    border-radius: 25px;
    border: 1px solid #d9d9d9;
    outline: 0;
    background: #1e2020;
    border: none;
}
.emoji-mart-category-label span {
    display: block;
    width: 100%;
    font-weight: 500;
    padding: 5px 6px;
    background-color: rgb(30, 32, 32) !important;
    color: white;
}

#markdown_review {
    img {
        max-height: 150px;
        padding: 15px 0;
    }
}
#markdown_review2 {
    img {
        max-height: 150px;
        padding: 15px 0;
    }
}
.blog_body {
    pre > ul {
        list-style: decimal;
        margin: 0;
        margin-left: 28px;
        padding: 0;
    }
    pre li {
        list-style: decimal-leading-zero;
        border-left: 1px solid #424141;
        padding-left: 2px;
        position: relative;
        transition: all 0.3s;
        line-height: 14px;
        &:hover .hljs {
            transition: all 0.3s;
            background: #1f1e1e;
            border-radius: 3px;
            overflow: inherit;
        }
    }
    /* LISTS
=============================================================================*/
    ul,
    ol {
        padding-left: 30px;
    }

    ul li > :first-child,
    ol li > :first-child,
    ul li ul:first-of-type,
    ol li ol:first-of-type,
    ul li ol:first-of-type,
    ol li ul:first-of-type {
        margin-top: 0px;
        list-style-type: square;
    }

    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin-bottom: 0;
    }

    dl {
        padding: 0;
    }

    dl dt {
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        padding: 0;
        margin: 15px 0 5px;
    }

    dl dt:first-child {
        padding: 0;
    }

    dl dt > :first-child {
        margin-top: 0px;
    }

    dl dt > :last-child {
        margin-bottom: 0px;
    }

    dl dd {
        margin: 0 0 15px;
        padding: 0 15px;
    }

    dl dd > :first-child {
        margin-top: 0px;
    }

    dl dd > :last-child {
        margin-bottom: 0px;
    }

    /* tables */
    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: auto;
    }
    table thead,
    table tr {
        border-top-width: 1px;
        border-top-style: solid;
        border-bottom-color: #131418;
    }
    table {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #131418;
    }
    thead,
    table td:nth-child(1) {
        font-weight: bold;
        color: #a688d4;
    }
    /* Padding and font style */
    table td,
    table th {
        padding: 10px 15px;
        font-size: 12px;
        font-family: Verdana;
        color: #bace94;
        background: #232527;
    }

    /* Alternating background colors */
    table tr:nth-child(even) {
        background: rgb(230, 238, 214);
    }
    table tr:nth-child(odd) {
        background: #fff;
    }

    *,
    .border-box,
    :after,
    :before {
        box-sizing: border-box;
    }
    ::-webkit-scrollbar-thumb {
        background: #4a4a4a;
    }
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #232527;
    }
    :root {
        --forground: #dddbdd;
        --light: #fff;
        --lightpurple: rgba(124, 106, 255, 1);
        --outline: 1px rgba(124, 106, 255, 0.8) solid;
        --greyoutline: 1px #e0e5eb solid;
        --white: #fff;
        --menuhover: #f4f8ff;
        --font-stack: -apple-system, BlinkMacSystemFont, Helvetica, Arial,
            sans-serif !important;
    }
    .hljs {
        display: block;
        overflow-x: auto;
        padding: 0.5em;
        color: #ffffff;
        background-color: #232527;
        overflow: inherit !important;
    }
    .hljs-addition,
    .hljs-keyword,
    .hljs-literal,
    .hljs-selector-tag,
    .hljs-type {
        color: #ff96e7;
    }
    .hljs-class .hljs-title,
    .hljs-selector-id,
    .hljs-template-variable,
    .hljs-variable {
        color: #fc6;
    }
    .hljs-doctag,
    .hljs-regexp,
    .hljs-string {
        color: #10ffdf;
    }
    .hljs-number,
    .hljs-selector-attr,
    .hljs-selector-pseudo {
        color: #f99157;
    }
    .hljs-built_in,
    .hljs-name,
    .hljs-section,
    .hljs-title {
        color: #f2ff79;
    }
    .hljs-attr {
        color: #ef5757;
    }
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition {
        color: #adff56;
    }
    code,
    pre {
        hyphens: manual;
        // margin-bottom: 0.5rem;
    }

    p {
        code {
            background: #313131;
            padding: 2px 10px;
            border-radius: 3px;
            color: #a9d27f;
        }
    }
    pre {
        //#ifdef h5
        font-size: 14px;
        padding: 10px 15px 0;
        line-height: 23px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        background-color: #232527;
        overflow: scroll;
        //#endif
    }
    a {
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        color: #c9cacc;
        word-wrap: break-word;
        background-repeat: repeat-x;
        background-position: bottom;
        background-size: 100% 6px;
        background-image: linear-gradient(
            transparent,
            transparent 5px,
            #c9cacc 5px,
            #c9cacc
        );
    }

    h1,h2,
    h3 {
       padding-bottom: 13px;
        color: #fff;
        border-left: 5px solid #836fff;
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
    }
    hr {
        border: 1px dashed #ccc;
    }
    p {
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
        margin-bottom: 0.5rem;
        word-break: break-all;
        line-height: 30px;
    }
    blockquote {
        background: inherit;
        color: #ccffb6;
        border-left: 0 solid #ccc;
        margin: 1rem 10px 1rem 0;
        padding: 0.5em 0;
        quotes: "\201C""\201D""\2018""\2019";
    }
    blockquote {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 40px;
        margin-inline-end: 40px;
    }
    blockquote:before {
        color: #ccffb6;
        content: "\201C";
        font-size: 2em;
        line-height: 0.1em;
        margin-right: 0.25em;
        vertical-align: -0.4em;
        margin-left: -18px;
    }
}
</style>
<style lang="less" scoped>
@import "../../assets/common.less";
//markedownStart
* {
    transition: all 0.3s;
}
//markdownEnd
.nextBlog {
    padding-left: 10px;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
        transition: all 0.3s;
        color: rgb(43, 188, 138);
    }
}
.info {
    border-radius: 4px;
    transition: all 0.3s;
    &:hover {
        transition: all 0.3s;
        box-shadow: 0px 1px 19px 12px #00000024;
    }
}
.commitReview {
    background: #383838;
    border-radius: 5px;
    margin-top: 15px;
    transition: all 0.3s;
    .reviewBox:last-child {
        border: none !important;
    }
    &:hover {
        transition: all 0.3s;
        box-shadow: 0px 1px 25px 12px #0000001a;
    }
}
.attach {
    transition: all 0.3s;
    &:hover {
        transition: all 0.3s;
        background: #191919;
    }
}
.review {
    transition: all 0.3s;
    &:hover {
        color: #f78589 !important;
        transition: all 0.3s;
    }
}
.upBtn {
    font-size: 40px;
    color: #a1a1a1;
    position: fixed;
    top: 80%;
    left: 93%;
    cursor: pointer;
}
.img_content {
    height: 320px;
    width: 100%;
    justify-content: center;
    display: flex;
    img {
        height: 100%;
        width: auto;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        box-shadow: 0 0 15px 15px black;
    }
}

* {
    color: #ccc;
}
.blog_content {
    background-color: #0c0c0b;
    color: white;
    width: 100%;
    margin: 0 auto;
    max-width: 880px;
    margin-top: 3rem;
    line-height: normal;
    text-align: left;
    padding-top: 3rem;
    border-bottom: 1px solid #2f2f2f;
    padding-bottom: 17px;
    .blog_head {
        width: 100%;
        margin: 0 auto;
        .title {
            font-size: 21px;
            padding-top: 2rem;
        }
        .title_detail {
            font-size: 15px;
            color: #a0a0a0;
            margin-top: 8px;
        }
        .line {
            border-bottom: 1px solid #ababab;
        }
    }
}
.title_class {
    color: white !important;
    height: 1rem;
    font-size: 18px;
    background: #ffffff38;
    border-radius: 3px;
    transition: all 0.5s;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
        transition: all 0.5s;
        color: #5f5f5f !important;
        outline-style: none;
        background: #f7f7f7 !important;
    }
}
textarea {
    width: 90%;
    border: none;
    padding: 1rem;
    margin: 0px;
    resize: none;
    overflow: hidden;
    padding: 20px 0;
    resize: none;
    border-radius: 0;
    outline: none;
    background: #303131;
}
.commit_btn {
    position: absolute;
    top: 73%;
    right: 2%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 28px;
    margin: 0 auto;
    padding: 0 20px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-align: center;
    color: white;
    border: 1px solid #303131;
    border-radius: 30px;
    background-color: #545454;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    &:hover {
        background-color: #292727;
    }
}
.blog_commit {
    width: 100%;
    height: 100%;
    line-height: normal;
    background: #0c0c0b;
    margin: 0;
    padding: 0;
    margin-top: 3rem;
    border-radius: 3px;
    margin-bottom: 3rem;
    .commit_box {
        width: 55%;
        height: 10rem;
        margin: 0 auto;
        background-color: white;
        position: relative;
        border-radius: 4px;
        box-shadow: 0 0 12px -1px #efefef;
        textarea {
            width: 90%;
            border: none;
            padding: 1rem;
            margin: 0px;
            resize: none;
            overflow: hidden;
            padding: 20px 0;
            resize: none;
            border-radius: 0;
            outline: none;
        }
        .btn {
            position: absolute;
            top: 73%;
            right: 2%;
            display: flex;
            height: 28px;
            margin: 0 auto;
            padding: 0 20px;
            justify-content: center;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            text-align: center;
            color: #444444;
            border: 1px solid #f7f7f7;
            border-radius: 30px;
            background-color: #f7f7f7;
            align-items: center;
            cursor: pointer;
            font-size: 15px;
            &:hover {
                border: 1px solid #eb5055;
                color: #eb5055;
            }
        }
    }
    .comment-view {
        width: 52%;
        margin: 4rem auto;
        background-color: #303131;
        position: relative;
        padding: 20px;
        transition: all 0.5s;
        cursor: pointer;
        &:hover {
            // box-shadow: 0 0 10px -1px #eaeaea;
            // background:#f3f3f3;
            transition: all 0.5s;
        }
        .comment-header {
            display: inline-block;
            width: 100%;
            img {
                display: inline-block;
                float: left;
                width: 40px;
                height: 40px;
                // border: 1px solid #eaeaea;
                border-radius: 50%;
            }
            span {
                font-size: 13px;
                line-height: 45px;
                display: inline-block;
                float: left;
                margin: 0 10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .comment-content {
            margin-bottom: 10px;
            color: #313131;
            text-align: left;
        }
        .comment-meta {
            font-size: 12px;
            text-align: left;
            transition: all 0.3s;
            i {
                &:hover {
                    color: white;
                    transition: all 0.3s;
                }
            }
        }
    }
}
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 45px;
}

.fave_box {
    margin: 2rem 15px;
    width: 105px;
    height: 40px;
    border: 1px solid #303131;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    display: flex;
    border-radius: 37px;
    align-items: center;
    color: #f78589;
    cursor: pointer;
}
.fave {
    width: 50px;
    height: 50px;
    background: url("http://www.dlhtx.top:3000/img/dianzan.png") no-repeat;
    background-position: left;
    background-size: auto 100%;
}

.faveActive {
    background-color: #ffffff !important;
    transition: all 0.6s;
    color: white;
}

.active {
    background-position: right;
    /* 主要在这一步 */
    transition: background 0.6s steps(19);
}

@media (max-width: 767px) {
    .markdown-body {
        padding: 15px;
    }
}
</style>

